<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>商品详情</title>

		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <link rel="stylesheet" href="../css/loaders.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<style>
			.swiper-slide img {
				display: block;
				width: 100%;
			}
			.swiper-pagination-bullet-active {
				background-color: #6ac82c;
			}
			.content-padded {
				margin-top: 15px;
				padding: 0 10px;
			}
			.title {
				overflow: hidden;
				margin: 10px 0;
			}
			.title .aui-pull-left {
				border-left: 3px solid #6ac82c;
				padding-left: 10px;
				color: #333;
				line-height: 18px;
				margin-top: 3px;
			}
			.aui-content-padded {
				margin: 0;
				padding: 0 10px;
				position: relative;
			}
			.content-title {
				color: #333;
				padding: 10px 0;
			}
			.aui-content-padded:after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				border-top: 1px solid #dfdfdf;
			}
			.content-title .title {
				font-size: 16px;
				margin: 0;
			}
			.content-title .aui-pull-left {
				font-size: 17px;
				line-height: 32px;
				color: #ff4040;
			}
			.content-title .aui-pull-right {
				font-size: 13px;
				line-height: 32px;
			}
			.content-title .aui-clearfix div {
				background-color: #e1f4d5;
				display: inline-block;
				padding: 3px 10px;
				color: #999;
				border-radius: 5px;
				font-size: 15px;
			}
			.content-title .aui-clearfix div span:nth-child(1) {
				color: #333;
				margin-right: 10px;
			}
			.content-title .aui-clearfix div span:nth-child(2) {
				margin-left: 5px;
			}
			.content-title .aui-clearfix div span:nth-child(3) {
				margin-left: 5px;
			}
			.content-list {
				padding: 10px;
				position: relative;
				overflow: hidden;
			}
			.content-list:after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				border-top: 1px solid #dfdfdf;
			}
			.content-list .aui-pull-left {
				line-height: 40px;
			}
			.content-list .aui-pull-right {
				line-height: 38px;
			}
			.content-list .aui-pull-right .aui-icon-unfold {
				font-size: 20px;
				color: #7fbeeb;
				margin-left: 10px;
			}
			.aui-counter-minus, .aui-counter-plus {
				border: 1px solid #409ee1;
				background: #7fbeeb !important;
				width: 38px;
			}
			.aui-counter-minus:active, .aui-counter-plus:active{
				background: #409ee1 !important;
			}
			.aui-counter-minus:before, .aui-counter-plus:before {
				color: #fff;
				font-size: 30px;
				line-height: 38px;
			}
			input.aui-counter-input {
				width: 60px;
				border-style: solid none;
				border-width: 1px;
				border-color: #409ee1;
				color: #262626;
				background-color: #ffffff;
				text-align: center;
				padding: 0;
				height: 40px;
				line-height: 42px;
				font-size: 24px;
			}
			.content {
				padding: 0 10px;
			}
			.content img {
				display: block;
				width: 100%;
			}
			.content p {
				color: #444;
				margin: 10px 0;
			}
			.content-item {
				overflow: hidden;
				margin: 15px 0;
			}
			.content-item .aui-pull-left {
				width: 55%;
			}
			.content-item .aui-pull-right {
				width: 45%;
				padding: 10px;
				font-size: 14px;
			}
			.content-item .aui-pull-right div {
				font-size: 16px;
				font-weight: bold;
			}
            #footer {
                position: fixed;
                left: 0;
                bottom: 0;
                z-index: 10;
                width: 100%;
                background-color: #339af2;
                padding: 10px 0;
                color: #fff;
                overflow: hidden;
                text-align: center;
                line-height: 28px;
            }
            #footer .aui-pull-left {
                width: 60%;
                line-height: 28px;
            }
            #footer .aui-pull-left span {
                line-height: 24px;
                margin-right: 5px;
            }
            #footer .aui-pull-right {
                width: 40%;
                position: relative;
            }
            #footer .aui-pull-right:before {
                content: '';
                display: block;
                height: 100%;
                position: absolute;
                background: red;
                bottom: 0;
                left: 0;
                z-index: 1;
                border-left: 1px solid #fff;
            }
            #bottom-div{height: 60px;}


            #main{
                opacity: 0;
                transition: all 0.5s ease;
            }
            .mask{
                width: 100px;
                height: 100px;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                position: absolute;
            }
            .loader{
                width: 50px;
                height: 50px;
                left: 18px;
                top: 20px;
                position: absolute;
            }
            .loader-inner div{
                width: 60px;
                height: 60px;
                background-color: #6ac82c;
            }
		</style>
	</head>
	<body>
    <div class="mask">
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
    </div>
    <div id="main">
    <div id="top-div"></div>
    <header id="header" class="aui-bar aui-bar-nav">
        <a href="javascript:;" onclick="javascript:window.history.back()" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
        <div id="header-title" class="aui-title">
            好农
        </div>
    </header>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="../image/banner1.png" />
				</div>
				<div class="swiper-slide">
					<img src="../image/banner1.png" />
				</div>
				<div class="swiper-slide">
					<img src="../image/banner1.png" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<div class="aui-content-padded">
			<div class="content-title">
				<div class="title">
					五常种植水稻
				</div>
				<div class="aui-pull-left">
					￥220
				</div>
				<div class="aui-pull-right">
					90人购买
				</div>
				<div class="aui-clearfix">
					<div>
						<span>有货</span><span>同城配送</span><span>明日送达</span>
					</div>
				</div>
			</div>
		</div>
		<div class="content-list">
			<div class="aui-pull-left">
				购买数量
			</div>
			<div class="aui-counter aui-pull-right">
				<div class="aui-counter-minus aui-disabled"></div>
				<input class="aui-counter-input" type="text" value="1">
				<div class="aui-counter-plus"></div>
			</div>
		</div>
		<div class="content-list">
			<div class="aui-pull-left">
				购买数量
			</div>
			<div class="aui-pull-right">
				<span>10Kg</span><span class="aui-iconfont aui-icon-unfold"></span>
			</div>
		</div>
		<div class="content-padded">
			<div class="title">
				<div class="aui-pull-left">
					商品详情
				</div>
			</div>
		</div>
		<div class="content">
			<img src="../image/detail-img2.png" />
			<p>
				五常种植水稻的历史只有100多年，江南地区早已
				种植几千年了，可是这个后起之秀，却端出了一碗
				中国最好吃的米饭，且进贡到了皇家。
			</p>
			<img src="../image/detail-img3.png" />
			<div class="content-item">
				<div class="aui-pull-left"><img src="../image/detail-img4.png" />
				</div>
				<div class="aui-pull-right">
					<div>
						产地
					</div>
					五常种植水稻的历史只有100多年，江南地区早已
					种植几千年了
				</div>
			</div>
			<img src="../image/detail-img6.png" />
		</div>
		<div id="bottom-div"></div>
    <footer id="footer">
        <div class="aui-pull-left" onclick="addCart()">
            <span class="aui-iconfont aui-icon-cart"></span>加入购物车
        </div>
        <div class="aui-pull-right" onclick="openOrderFormWin()">
            立即购买
        </div>
    </footer>
    </div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/swiper.min.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
        window.onload=function(){
            setTimeout(function(){
                $('.mask').css('display','none');
                $('#main').css('opacity','1');
            },250)
        };
        function openOrderFormWin(){
            window.location.href = "../html/order_form.html";
        }
        function addCart(){
            alert("加入购物车成功")
        }
		$('.aui-counter-plus').click(function() {
			var a = $(this).parent().find('.aui-counter-input').val();
			a++;
			$(this).parent().find('.aui-counter-input').val(a);
		});
		$('.aui-counter-minus').click(function() {
			var a = $(this).parent().find('.aui-counter-input').val();
			if (a > 0) {
				a--;
				$(this).parent().find('.aui-counter-input').val(a);
			}
		});
        var mySwiper = new Swiper('.swiper-container', {
            loop : 'loop', //轮播循环
            autoplay : 2000, //可选选项，自动滑动
            // 如果需要分页器
            pagination : '.swiper-pagination',
            speed : 400 //滑动速度
        })
	</script>
</html>